<template>
  <div class="DashboardPage">
    <div class="topDiv">
      <div class="left">
        <div class="userInfo brr">
          <div class="bgi">
            <div class="userLeft">
              <div class="user">
                <img :src="$store.state.user.avatar" alt="avant">
                <p>仓储管理员</p>
              </div>
              <div class="hitokoto">
                <p>用代码表达言语的魅力，用代码书写山河的壮丽。</p>
                <p>——Hitokoto</p>
              </div>
            </div>
            <div class="docker brr">
              <p>幻想乡总仓</p>
            </div>
          </div>
        </div>
        <div class="todoInfo pdd brr mgt wbg">
          <div class="title">
            <div class="text">待办信息</div>
          </div>
          <div class="infos">
            <div class="row brr pdd hoverItem" @click="$router.push('/manage-storage-in/list-in/list')">
              <div class="iTitle">
                <i class="el-icon-folder-add"></i>
                <span>{{ todoData[0].name}}</span>
              </div>
              <div class="info">
                <div class="smi">新增</div>
                <div class="big">{{ todoData[0].value1 }}</div>
                <div class="smi">待审核</div>
                <div class="big Tow">{{ todoData[0].value2 }}</div>
              </div>
            </div>
            <div class="row brr pdd hoverItem" @click="$router.push('/manage-storage-out/list-out')">
              <div class="iTitle">
                <i class="el-icon-folder-remove"></i>
                <span>{{ todoData[1].name}}</span>
              </div>
              <div class="info">
                <div class="smi">新增</div>
                <div class="big">{{ todoData[1].value1 }}</div>
                <div class="smi">待审核</div>
                <div class="big Tow">{{ todoData[1].value2 }}</div>
              </div>
            </div>
            <div class="row brr pdd hoverItem" @click="$router.push('/manage-storage/list')">
              <div class="iTitle">
                <i class="el-icon-folder-checked"></i>
                <span>{{ todoData[2].name}}</span>
              </div>
              <div class="info">
                <div class="smi">新增</div>
                <div class="big">{{ todoData[2].value1 }}</div>
                <div class="smi">待审核</div>
                <div class="big Tow">{{ todoData[2].value2 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right pdd brr wbg">
        <div class="title">
          <div class="text">通知/公告</div>
        </div>
        <div class="info" v-for="(item, index) in newsList" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
    </div>
    <div class="tasks pdd brr mgt wbg">
      <div class="title">
        <div class="text">任务导航</div>
      </div>
      <div class="bar">
        <div class="item hoverItem" @click="$router.push('/manage-storage-in/list-in/task-receive')">
          <i class="el-icon-shopping-cart-full"></i>
          <span>收货任务</span>
        </div>
        <div class="item hoverItem" @click="$router.push('/manage-storage-in/list-in/task-add')">
          <i class="el-icon-sell"></i>
          <span>上架任务</span>
        </div>
        <div class="item hoverItem" @click="$router.push('/manage-storage/list-task')">
          <i class="el-icon-set-up"></i>
          <span>盘点任务</span>
        </div>
        <div class="item hoverItem" @click="$router.push('/manage-storage-out/task-picking')">
          <i class="el-icon-files"></i>
          <span>拣货任务</span>
        </div>
        <div class="item hoverItem" @click="$router.push('/manage-storage-out/manage-task-transfer')">
          <i class="el-icon-connection"></i>
          <span>交接任务</span>
        </div>
      </div>
    </div>
    <div class="inOut pdd brr mgt wbg">
      <div class="title">
        <div class="text">入库/出库信息</div>
        <div class="dateSwitch">
          <el-radio-group v-model="dimension" size="small" fill="#FFB200">
            <el-radio-button label="w">本周</el-radio-button>
            <el-radio-button label="e">本月</el-radio-button>
            <el-radio-button label="c">全年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="echartsView" ref="barCharts"></div>
    </div>
    <div class="echarts mgt">
      <div class="left pdd brr wbg">
        <div class="title">
          <div class="text">库存使用情况</div>
        </div>
        <div class="echartsView" ref="PieRadusCharts"></div>
      </div>
      <div class="right pdd brr wbg">
        <div class="title">
          <div class="text">库区使用情况</div>
        </div>
        <div class="echartsView Pie" ref="PieCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { todos, sumList, stockUseStatus } from '@/api/dashboard'
import * as echarts from 'echarts'
export default {
  data () {
    return {
      // 通知公告假数据
      newsList: [
        {
          title: '紧急盘点通知',
          time: '2020.12.30 18:23:14'
        },
        {
          title: '运维服务更新通知',
          time: '2021.01.25 18:23:14'
        },
        {
          title: '客户入库变更通知',
          time: '2021.01.26 18:23:14'
        },
        {
          title: '五一放假通知',
          time: '2021.02.15 18:23:14'
        },
        {
          title: '品达物流系统对接通知',
          time: '2021.3.25 18:23:14'
        }
      ],
      todoData: [
        {
          name: '入库单',
          value1: 0,
          value2: 0
        },
        {
          name: '出库单',
          value1: 0,
          value2: 0
        },
        {
          name: '盘点单',
          value1: 0,
          value2: 0
        }
      ],
      dimension: 'w'
    }
  },
  created () {
    this.getTodos()
  },
  mounted () {
    // 出入库
    this.BarEcharts.setOption({
      grid: {
        top: 10,
        left: 40,
        right: 2
      },
      legend: {
        bottom: '0%'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataset: {
        source: [
          ['product', '入库', '出库'],
          ['载入中', 0, 0]
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [
        {
          type: 'bar',
          itemStyle: {
            color: '#FF7100'
          }
        },
        {
          type: 'bar',
          itemStyle: {
            color: '#FFB200'
          }
        }
      ]
    })
    this.updateBarEcharts()
    // 冻结库存
    this.PieRadusCharts.setOption({
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 0, name: '载入中' }
          ],
          itemStyle: {
            normal: {
              color: function (colors) {
                const colorList = [
                  '#E4DBDA',
                  '#FFAA00'
                ]
                return colorList[colors.dataIndex]
              }
            }
          }
        }
      ]
    })
    this.updatePieRadusCharts()
    // 窗口大小发生变化重新渲染图表大小
    window.onresize = () => {
      this.BarEcharts.resize()
      this.PieRadusCharts.resize()
      this.PieCharts.resize()
    }
    this.PieCharts.setOption({
      legend: {
        orient: 'vertical',
        left: '65%',
        top: '35%',
        data: ['拣货区', '出库区', '暂存库区', '进货暂存区', '出货暂存区']
      },
      series: [{
        type: 'pie',
        data: [{
          value: 335,
          name: '拣货区'
        }, {
          value: 310,
          name: '出库区'
        }, {
          value: 234,
          name: '暂存库区'
        }, {
          value: 135,
          name: '进货暂存区'
        }, {
          value: 1548,
          name: '出货暂存区'
        }],
        center: ['30%', '50%'],
        label: {
          position: 'inside',
          formatter: '{c}'
        }
      }]
    })
  },
  methods: {
    async getTodos () {
      const res = await todos()
      this.todoData = res.data.data
      console.log(res)
    },
    async updateBarEcharts () {
      const { data: { data } } = await sumList(this.dimension)
      // console.log(data)
      const newRes = data.x.map((item, index) => {
        return [item, data.data[0].data[index], data.data[1].data[index]]
      })
      // console.log(newRes)
      this.BarEcharts.setOption({
        dataset: {
          source: newRes
        }
      })
    },
    async updatePieRadusCharts () {
      const { data: { data } } = await stockUseStatus()
      console.log(data)
      this.PieRadusCharts.setOption({
        series: [
          {
            data
          }
        ]
      })
    }
  },
  computed: {
    BarEcharts () {
      return echarts.init(this.$refs.barCharts)
    },
    PieRadusCharts () {
      return echarts.init(this.$refs.PieRadusCharts)
    },
    PieCharts () {
      return echarts.init(this.$refs.PieCharts)
    }
  },
  watch: {
    dimension () {
      this.updateBarEcharts()
    }
  }
}
</script>

<style lang="scss" scoped>
.DashboardPage {
  .echartsView {
    width: 100%;
    height: calc(100% - 32px);
    box-sizing: border-box;
    &.Pie {
      width: 500px;
      margin: auto;
    }
  }
  .topDiv {
    display: flex;
    .left {
      flex: 1;
      margin-right: 30px;
      .userInfo {
        height: 148px;
        background: linear-gradient(270deg,#ffc771,#ffa634);
        .bgi {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          overflow: hidden;
          width: 100%;
          height: 100%;
          background-image: url('~@/assets/dashboardHeadBarLeft.png'),url('~@/assets/dashboardHeadBarRight.png');
          background-size: auto 100%;
          background-position: 0 0, right bottom ;
          background-repeat: no-repeat;
        }
        .userLeft {
          display: flex;
          .user {
            width: 150px;
            text-align: center;
            font-size: 15px;
            margin-right: 64px;
            img {
              width: 62px;
              height: 62px;
              margin-top: 30px;
              border-radius: 50%;
            }
          }
          .hitokoto {
            margin-top: 30px;
            font-size: 16px;
            color: white;
            p:last-child {
              text-align: end;
              margin-right: -3em;
            }
          }
        }
        .docker {
          width: 170px;
          height: 40px;
          margin: 15px 15px 0 0;
          background: #f8f5f5;
          p {
            margin: 0;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            color: #332929;
          }
        }
      }
      .todoInfo {
        height: 282px;
        .infos {
          display: flex;
          margin-top: 20px;
          height: calc(100% - 20px - 15px);
          .row {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #FBF7F7;
            margin-right: 30px;
            &:last-child {
              margin: 0;
            }
            &.pdd {
              padding: 20px;
            }
            .info {
              display: flex;
              align-items: center;
              .big {
                margin: 0 20px 0 10px;
                font-size: 36px;
                font-weight: 500px;
                color: #332929;
              }
              .smi {
                font-size: 14px;
              }
            }
            .iTitle {
              display: flex;
              align-items: center;
              i {
                width: 49px;
                height: 49px;
                line-height: 49px;
                font-size: 32px;
                border-radius: 5px;
                color: white;
                text-align: center;
              }
              span {
                margin-left: 1em;
              }
            }
            &:nth-child(1) {
              i {
                background-color: #0076ff;
              }
              .Tow {
                color: #0076ff;
              }
            }
            &:nth-child(2) {
              i {
                background-color: #ffb200;
              }
              .Tow {
                color: #ffb200;
              }
            }
            &:nth-child(3) {
              i {
                background-color: #ff7100;
              }
              .Tow {
                color: #ff7100
              }
            }
          }
        }
      }
    }
    .right {
      width: 261px;
      height: 451px;
      .info {
        margin-top: 15px;
        border-top: 1px solid #f5efee;
        .title {
          font-size: 15px;
          margin-top: 15px;
        }
        .time {
          font-size: 13px;
          margin-top: 10px;
          color: #887e7e;
        }
      }
    }
  }
  .tasks {
    .bar {
      display: flex;
      margin-top: 20px;
      .item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        height: 93px;
        margin-right: 30px;
        border-radius: 5px;
        background: #f8f5f5;
        &:last-child {
          margin: 0;
        }
        i {
          width: 50px;
          height: 50px;
          line-height: 50px;
          border-radius: 50%;
          font-size: 32px;
          color: white;
          text-align: center;
        }
        &:nth-child(1) i{
          background-color: #0076ff;
        }
        &:nth-child(2) i{
          background-color: #52d4f3;
        }
        &:nth-child(3) i{
          background-color: #FF7100;
        }
        &:nth-child(4) i{
          background-color: #FF609E;
        }
        &:nth-child(5) i{
          background-color: #FFB200;
        }
      }
    }
  }
  .hoverItem:hover {
    background: hsla(0,0%,100%,.8) !important;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 6%);
    border-radius: 8px;
    cursor: pointer;
  }
  .inOut {
    height: 500px;
    ::v-deep .el-radio-button__inner:hover {
      color: #FFB200;
    }
    .is-active ::v-deep .el-radio-button__inner:hover {
      color: white;
    }
  }
  .echarts {
    display: flex;
    height: 354px;
    .left {
      flex: 7;
      margin-right: 30px;
    }
    .right {
      flex: 17;
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    .text {
      font-weight: 600;
    }
  }
}
</style>
